<template>
<div class="announcement-list">
  <div>
    <!-- 搜索栏 -->
    <div  class="search">
      <el-button  @click="saveAnnounceClick" style="float: right;margin-top: 10px;margin-right: 50px;" type="primary">发布新公告</el-button>
      <ul>
        <li>
          <el-input placeholder="请输入内容" v-model="params.key" clearable width="200">
            <el-button slot="append" icon="el-icon-search" @click="getAnnouncementData"></el-button>
          </el-input>
        </li>

        <li >
          <el-select v-model="params.status"  :placeholder="'状态'" @change="getAnnouncementData">
            <el-option :label="'可用'" value="0"></el-option>
            <el-option :label="'不可用'" value="1"></el-option>
            <el-option :label="'不限'" value=""></el-option>
          </el-select>
        </li>

      </ul>




    </div>
    <!--    数据-->
    <el-table :data="announcementTableData"  style="width: 97%" height="580" @sort-change="sortChange">



      <el-table-column fixed  label="用户" width="120" sortable="custom">
        <template slot-scope="scope">
          <span style="color: #c177e7" v-html="getUserName(scope.row.userId)"></span>
        </template>

      </el-table-column>

      <el-table-column
          prop="title"
          label="标题"
          width="200">
      </el-table-column>
      <el-table-column
          prop="weight"
          label="权重"
          width="100">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="color: #25bb9b">可用</span>
          <span v-else-if="scope.row.status==1" style="color: #afafaf"> 不可用</span>
          <span v-else style="color: red;">未知</span>
        </template>
      </el-table-column>


      <el-table-column prop="create_time" label="创建时间" width="150" sortable="custom">
        <template slot-scope="scope">
          <span style="color: #8e99a1">{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" >
        <template slot-scope="scope">
          <div v-html="scope.row.text"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteAnnouncement(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
          <el-button type="text" size="small" @click="updateAnnouncementClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="params.size"
          :page-sizes="[10,20,30,50,100]"
          @current-change="chg"
          @size-change="chgsize"
      >
      </el-pagination>
    </div>
  </div>

  <!--  公告 弹出框/表单-->
  <el-dialog :title="form.id?'修改公告':'添加公告'" :visible.sync="dialogFormVisible" >
    <el-form ref="form" :model="form" label-width="80px" >
      <el-input v-model="form.id" v-show="false" disabled></el-input>


 
      <el-form-item :label="'标题'" style="width: 80%;">
        <el-input v-model="form.title" ></el-input>
      </el-form-item>
      <el-form-item :label="'权重'" style="width: 40%;">
        <el-input v-model="form.weight" ></el-input>
      </el-form-item>
      <el-form-item :label="'状态'" required style="width: 250px;">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">可用</el-radio>
          <el-radio :label="1">不可用</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item :label="'内容'" style="width: 80%;">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="form.text" ></el-input>
      </el-form-item>




    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{$t('cancel')}}</el-button>
      <el-button type="primary" @click="updateOrSave()">{{$t('save')}}</el-button>
    </div>
  </el-dialog>








</div>
</template>

<script>
import * as userApi from "@/api/admin";
import * as announcementApi from '@/api/announcement'
export default {
  name: "announcement",
  data(){
    return{
      announcementTableData:[],
      total:0,
      form:{},
      dialogFormVisible:false,
      userNames:{},
      params:{
        page:1,
        size:10,
      }
    }
  },
  created() {
    this.getAnnouncementData();
  },
  methods: {

    //根据信息userId获取用户名
    getUserName(id){
      return this.userNames[id];
    },
    // 自定义排序
    sortChange(column, prop, order) {
      // console.info(column);
      this.params.field = column.prop;
      this.params.order = column.order;
      if (this.params.order) {
        if (this.params.order[0] == 'a') this.params.order = "asc";
        else this.params.order = "desc";
      } else {
        this.params.order = "";
        this.params.field = ''
      }
      // console.info(this.params)
      this.getAnnouncementData();
    },
    updateOrSave() {
      if (this.form.id) { //修改
        announcementApi.updateAnnouncement(this.form).then(res => {
          if (res.data.success) {
            this.$message("修改成功");
            this.dialogFormVisible = false;
            // this.getAnnouncementData();
          }
        })
      } else {
        announcementApi.saveAnnouncement(this.form).then(res => {
          if (res.data.success) {
            this.$message("保存成功");
            this.dialogFormVisible = false;
            this.getAnnouncementData();
          }
        })
      }
    },

    //弹出修改狂
    updateAnnouncementClick(data) { //修改
      this.dialogFormVisible = true;

      this.form = data;
      // this.form = JSON.parse(JSON.stringify(this.form))
      // console.info(this.form,data)

    },
    saveAnnounceClick() {  //保存弹出框
      this.dialogFormVisible = true;
      this.form = {"status": 0,weight:0};

    },
    deleteAnnouncement(data) { //删除
      this.$confirm(this.$t('problemMode.case.deleteWarnBefore') + data.title + this.$t('problemMode.case.deleteWarnAfter'), this.$t('prompt'), {
        confirmButtonText: this.$t('save'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        announcementApi.deleteAnnouncement({"id": data.id}).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '删除成功!'});
            this.getAnnouncementData()
          }
        })
      })
    },


    //每页记录数发生改变时
    chgsize(pgsize) {
      //更改每页记录数
      this.params.size = pgsize;
      //从每一页开始查询
      this.params.page = 1;
      //重新查询
      this.getAnnouncementData();
    },
    //当页数发生变化时执行
    chg(curpage) {
      //更新查询的页数
      this.params.page = curpage;
      //重新查询
      this.getAnnouncementData();
    },
    getAnnouncementData(){
      announcementApi.getAnnouncementList(this.params).then(async res=>{
        if(res.data.data){
          var tables = res.data.data.dataList;

          //获取用户名字
          for (var i = 0; i < tables.length; i++) {
            // console.info(tables[i].userId)
            if (!this.userNames[tables[i].userId]) {
              await userApi.getEasyUserById({"id": tables[i].userId}).then(res2 => {
                if (res2.data.data && res2.data.data.username) {
                  // console.info("success="+res2.data.data.id);
                  this.userNames[res2.data.data.id] = res2.data.data.username;
                } else {
                  this.userNames[tables[i].userId] = '<span style="color:grey">未知用户</span>';
                }
              });
            }
          }
          this.announcementTableData = tables;
          this.total =res.data.data.total;
        }
      })
    }
  }
}
</script>

<style scoped>
.search > ul > li{
  list-style: none;
  display:inline-block;
  text-align: left;
  width: 15.625rem;
  margin: .625rem;
}
.search > ul{
  /* margin: .625rem; */
  padding: 0px;
  /* margin: 0px; */
  margin-bottom: 20px;
  text-align: left;
  /* width: 55rem; */
}
</style>